import { useEffect, useRef, useState } from 'react';
import { Html5QrcodeScanner } from 'html5-qrcode';
import styles from './Sao.module.css'
import { NavBar, Space, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
export default function QrScanner() {
  // 状态：存储扫描结果
  const navigate=useNavigate()
  const [scanResult, setScanResult] = useState(null);
  // 引用：存储扫描器实例
  const scannerRef = useRef(null);

  useEffect(() => {
    // 组件挂载时初始化二维码扫描器
    const scanner = new Html5QrcodeScanner('qr-reader', {
      qrbox: { width: 250, height: 250 }, // 扫描框尺寸
      fps: 3, // 每秒扫描帧数
      showTorchButtonIfSupported: false, // 隐藏手电筒按钮
      showZoomSliderIfSupported: false,  // 隐藏缩放滑块
      showScanButton: false              // 隐藏扫描按钮
    });

    // 将扫描器实例存入引用
    scannerRef.current = scanner;

    // 扫描成功回调函数
    const onScanSuccess = (result) => {
      scanner.clear(); // 停止扫描
      console.log(result);
      setScanResult(result); // 存储扫描结果
    };

    // 开始扫描
    scanner.render(onScanSuccess);

    // 组件卸载时清理扫描器
    return () => {
      scannerRef.current?.clear();
    };
  }, []);
const back=()=>{
navigate('/my')
}
  // 重新扫描函数
  const handleRescan = () => {
    setScanResult(null); // 清空之前的结果
    // 重新启动扫描器
    scannerRef.current?.render((result) => {
      scannerRef.current.clear();
      setScanResult(result);
    });
  };
  useEffect(()=>{
    handleRescan()
  },[])
  return (
    <div className={styles.she}>  
      <div style={{ width:'100%',position:'fixed',top:'0px',color:'#fff'}}>
        <NavBar onBack={back}>二维码扫描</NavBar> 
        </div>   
      {/* 如果有扫描结果则显示结果，否则显示扫描界面 */}
        <div id="qr-reader" style={{ width: '100%' }}></div>
    </div>
  );
}